<template>
   <div :class="getInputClass">
        <button class="name">音乐播放器</button>
        <div class="inputBox flex" >
            <input class="input" placeholder="搜索你喜欢的音乐吧!" maxlength="20"  
                        @input="AntiShake" v-model="keyword_"  @keyup.enter="Search_()" @focus="AntiShake" @blur="handleBlur"/>
            <i class="el-icon-search" @click="Search_()"></i>
        </div>
        <div class="fun flex"> 
            <i class="el-icon-minus flex" @click="SETSTATE(1)"></i>
            <i class="el-icon-close flex" @click="SETSTATE(0)"></i>
        </div>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
            keyword_:'',
            timer:null,
            inputState:false,
        }
     },
     computed:{
       ...mapState('Music',['keyword','PlayNow']),
       getInputClass(){
         if(this.inputState) return 'active'
       }
     },
     methods:{
        ...mapMutations('Music',['SETSTATE','SETCONTENTSTATE']),
        ...mapActions('Music',['getSearchTips','getSearchResult']),
        //失去搜索焦点
        handleBlur(){
            this.inputState = false

        },
        AntiShake(){ //防抖
          this.inputState = true
          clearTimeout(this.timer)
          this.timer=setTimeout(() => {
             this.change()
          }, 200);
        },
        change(){
            if(this.keyword_=='') return this.SETCONTENTSTATE(1)
            this.getSearchTips(this.keyword_)
        },
        Search_(){ 
            if(this.keyword_=='') return this.$message.error('搜索内容不能为空')
            this.getSearchResult(this.keyword_)
        }
     },
     watch:{
        keyword:{
            immediate:true,
            handler(newValue){
             this.keyword_=newValue
            }
        }
     }
  }
</script>
<style scoped lang='less'>
//名作
.name{
     font-size: 20px;
     color: white;
     letter-spacing:0 ;
}
//得到焦点后的搜索框
div.active{
   justify-content: center !important;
   

   div.inputBox{
      width: 80%;
      transition-duration: 0.5s;
   }

   .name{
      display: none;
   }
   .fun{
      display: none;
   }
}
//搜索框
.inputBox{
     width: 40%;
    border-radius: 15px;
    background: white;
    height: 30px;
    padding: 0 15px;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    transition-duration: 0s;
   
    .input{
        width: 80%;
        font-size: 15px;
        padding: 0 5px;
        color: #555;
    }
}
// 功能
.fun{
    transition-duration: 0.5s;
    flex-wrap: nowrap;
    i{
        font-size: 25px;
        color: white;
        margin-right: 5px;
        border-radius: 50%;
        padding: 3px;
    }
    i:hover{
        background: rgba(0, 0, 0, 0.5);
    }
}
</style>